<template>
	<view class="container">
		<view class="header">
			<text class="title">🌓 深色模式示例</text>
			<text class="subtitle">跟随系统自动切换</text>
		</view>
		
		<view class="theme-info">
			<view class="info-card">
				<text class="label">当前主题</text>
				<text class="value">{{ currentTheme === 'dark' ? '🌙 深色模式' : '☀️ 浅色模式' }}</text>
			</view>
		</view>
		
		<!-- #ifdef APP -->
		<view class="theme-switch">
			<text class="switch-title">主题模式设置</text>
			<view class="switch-options">
				<view 
					v-for="mode in themeModes" 
					:key="mode.value"
					:class="['switch-option', themeMode === mode.value ? 'active' : '']"
					@click="changeThemeMode(mode.value)"
				>
					<text class="option-icon">{{ mode.icon }}</text>
					<text class="option-label">{{ mode.label }}</text>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<view class="navigation-section">
			<text class="section-title">页面跳转示例</text>
			<view class="nav-buttons">
				<button class="nav-btn primary" @click="goToDetail">
					<view class="btn-content">
						<text class="btn-title">查看内置组件</text>
						<text class="btn-desc">体验页面跳转和内置组件</text>
					</view>
					<text class="btn-arrow">→</text>
				</button>
			</view>
		</view>

		<view class="cards">
			<view class="card">
				<text class="card-title">自动适配</text>
				<text class="card-desc">应用会跟随系统设置自动切换浅色和深色模式</text>
			</view>

			<view class="card">
				<text class="card-title">主动切换</text>
				<text class="card-desc">应用内支持手动切换主题（仅限App端）</text>
			</view>

			<view class="card">
				<text class="card-title">主题变量</text>
				<text class="card-desc">通过 theme.json 统一管理pages.json主题颜色</text>
				<text class="card-desc">通过 theme.scss 统一管理页面主题颜色</text>
			</view>

			<view class="card">
				<text class="card-title">CSS 适配</text>
				<text class="card-desc">使用媒体查询 prefers-color-scheme 适配样式</text>
			</view>
		</view>

		<view class="tips">
			<text class="tips-title">💡 使用提示</text>
			<text class="tips-text">仅App端支持主动设置深色模式</text>
			<text class="tips-text">Web端强制跟随浏览器外观主题设置</text>
			<text class="tips-text">小程序端强制跟随微信深色模式设置</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTheme: 'light',
				themeMode: 'auto', // auto: 跟随系统, light: 开启浅色, dark: 开启深色
				themeModes: [
					{ value: 'auto', label: '跟随系统', icon: '🔄' },
					{ value: 'light', label: '浅色模式', icon: '☀️' },
					{ value: 'dark', label: '深色模式', icon: '🌙' }
				]
			}
		},
		onLoad() {
			this.loadThemeMode();
			this.getCurrentTheme();
			uni.onThemeChange(this.onThemeChange);
		},
		onUnload() {
			uni.offThemeChange(this.onThemeChange);
		},
		methods: {
			onThemeChange({ theme }) {
				this.currentTheme = theme;
			},
			getCurrentTheme() {
				const { osTheme, theme } = uni.getSystemInfoSync();
				this.currentTheme = osTheme || theme || 'light';
			},
			loadThemeMode() {
				// 从本地存储加载主题模式设置
				const savedMode = uni.getStorageSync('themeMode');
				if (savedMode) {
					this.themeMode = savedMode;
					this.applyThemeMode(savedMode);
				}
			},
			changeThemeMode(mode) {
				this.themeMode = mode;
				// 保存到本地存储
				uni.setStorageSync('themeMode', mode);
				// 应用主题模式
				this.applyThemeMode(mode);
			},
			applyThemeMode(mode) {
				// #ifdef APP
				plus.nativeUI.setUIStyle(mode);
				// #endif
				
				// 如果不是跟随系统，手动更新当前主题状态用于显示
				if (mode !== 'auto') {
					this.currentTheme = mode;
				} else {
					this.getCurrentTheme();
				}
			},
			goToDetail() {
				uni.navigateTo({
					url: '/pages/detail/detail',
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 20px;
		padding-bottom: 60px;
		background-color: var(--page-bg);
	}

	.header {
		text-align: center;
		margin-bottom: 30px;
	}

	.title {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: var(--text-primary);
		margin-bottom: 10px;
	}

	.subtitle {
		display: block;
		font-size: 14px;
		color: var(--text-secondary);
	}

	.theme-info {
		margin-bottom: 20px;
	}

	.info-card {
		background-color: var(--card-bg);
		border-radius: 8px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.label {
		font-size: 14px;
		color: var(--text-secondary);
		margin-bottom: 8px;
	}

	.value {
		font-size: 20px;
		font-weight: bold;
		color: var(--primary-color);
	}

	.theme-switch {
		margin-bottom: 20px;
	}

	.switch-title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		color: var(--text-primary);
		margin-bottom: 12px;
		padding-left: 4px;
	}

	.switch-options {
		display: flex;
		gap: 8px;
	}

	.switch-option {
		flex: 1;
		background-color: var(--card-bg);
		border-radius: 8px;
		padding: 16px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		border: 1.5px solid transparent;
		transition: all 0.3s;
	}

	.switch-option.active {
		border-color: var(--primary-color);
	}

	.option-icon {
		font-size: 24px;
		margin-bottom: 6px;
	}

	.option-label {
		font-size: 13px;
		color: var(--text-secondary);
		text-align: center;
	}

	.switch-option.active .option-label {
		color: var(--primary-color);
		font-weight: bold;
	}

	.cards {
		margin-bottom: 20px;
	}

	.card {
		background-color: var(--card-bg);
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.card-title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		color: var(--text-primary);
		margin-bottom: 8px;
	}

	.card-desc {
		display: block;
		font-size: 14px;
		color: var(--text-secondary);
		line-height: 1.6;
	}

	.navigation-section {
		margin-bottom: 20px;
	}

	.section-title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		color: var(--text-primary);
		margin-bottom: 12px;
		padding-left: 4px;
	}

	.nav-buttons {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	.nav-btn {
		background-color: var(--card-bg);
		border-radius: 8px;
		padding: 16px;
		display: flex;
		align-items: center;
		border: none;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
		transition: all 0.3s;
		position: relative;
		overflow: hidden;
		width: 100%;
	}

	.nav-btn:active {
		transform: scale(0.98);
	}

	.btn-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		z-index: 1;
	}

	.btn-title {
		font-size: 16px;
		font-weight: bold;
		color: var(--text-primary);
		margin-bottom: 4px;
	}

	.btn-desc {
		font-size: 12px;
		color: var(--text-secondary);
	}

	.btn-arrow {
		font-size: 20px;
		color: var(--primary-color);
		font-weight: bold;
		z-index: 1;
	}

	.tips {
		background-color: var(--card-bg);
		border-radius: 8px;
		padding: 16px;
		border-left: 3px solid var(--primary-color);
	}

	.tips-title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		color: var(--primary-color);
		margin-bottom: 10px;
	}

	.tips-text {
		display: block;
		font-size: 14px;
		color: var(--text-secondary);
		line-height: 1.8;
		margin-bottom: 4px;
	}
</style>